<template>
  <el-dialog @closed="handleClose" class="equi-dialog" :visible.sync="visible" :append-to-body="true" :title="title">
    <div>

      <el-form :show-message="false" :rules="rules" ref="form" class="equi-form" :model="form" label-width="auto">

        <el-form-item label="厂家名称：" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="备注：" prop="remark">
          <el-input v-model="form.remark" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 4}" />
        </el-form-item>

        <div class="flex flextc footerBtn m-t-25">
          <el-button v-if="!isEdit" class="defaultbtn saveBtn" @click="handleSave">保存</el-button>
          <el-button v-else class="defaultbtn saveBtn" @click="handleUpdate">更新</el-button>
          <el-button v-if="!isEdit" class="defaultbtn clsoeBtn" @click="handleCloseDialog">关闭</el-button>
          <el-button v-else class="defaultbtn clsoeBtn" @click="handleCloseDialogUpdate">关闭</el-button>
        </div>
      </el-form>
    </div>

  </el-dialog>
</template>

<script>
import { updateComArticle, createComAdd } from '@/api/operation/BOM/opBomCompany'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'BomEquipment',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入厂家名称', trigger: 'change' }]
      },
      visible: false,
      dataList: [],
      form: { ...this.data },
      title: '厂家管理',
      formOrigin: {
        id: '',
        name: '',
        remark: '',
        version: ''
      }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  mounted() { },
  methods: {
    handleClose() {
      this.$refs.form.resetFields()
    },
    // 自定义错误弹窗
    customValid(field){
      let arr = [];
      for(let item in field){
        arr.push(item)
      }
      showNotice('error','提示',field[arr[0]][0].message)
    },
    handleUpdate() {
      this.$refs.form.validate((valid,field) => {
        if (valid) {
          const upCom = {
            id: this.form.id,
            name: this.form.name,
            orgId: JSON.parse(this.$storage.get('userInfo')).orgList[0].id,
            remark: this.form.remark,
            version: this.form.version
          }
          updateComArticle(upCom).then((res) => {
            if (res.code === '000000') {
              showNotice('success', '提示', '保存成功!')
              this.$emit('handleRefresh')
              this.$emit('handleCloseDialog')
            }else{
              showNotice('warning', '提示', res.msg)
            }
          })
        } else {
          this.customValid(field)
        }
      })
    },
    handleCloseDialog() {
      console.log('子组件关闭')
      this.$emit('handleCloseDialog')
    },
    handleCloseDialogUpdate() {
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
    },
    handleSave() {
      this.$refs.form.validate((valid,field) => {
        if (valid) {
          this.handleCreateAdd(this.form)
        } else {
          this.customValid(field)
        }
      })
    },
    // }
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    handleCreateAdd(data) {
      data.orgId = JSON.parse(this.$storage.get('userInfo')).orgList[0].id
      createComAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }else{
          showNotice('warning', '提示', res.msg)
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
// @import '@/styles/public.scss';
::v-deep .el-dialog__body {
  padding: 30px 20px;
  height: auto;
  background-color: #fff;
}
::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
  height: auto;
  .el-dialog__title {
    color: #ffffff;
  }
}
::v-deep .el-dialog {
  width: 40%;
}
</style>
